<template>
  <div class="dashboard-container">
    <github-corner class="github-corner" />

    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="
                userInfo.photo
                  ? FILE_BASE_URL + userInfo.photo
                  : 'http://123.57.237.81:8080/caresystem/upload/2024/12/6/20241206104703937.jpg'
              "
            />
            <div>
              <p>{{ userInfo.username }}</p>
              <p class="text-sm text-gray">今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
            </div>
          </div>
        </el-col>

        <el-col :span="6" :xs="24">
          <div class="flex h-full items-center">
            <svg-icon :icon-class="'project'" size="22px" style="margin: 0 0 30px 20px" />

            <el-statistic
              title="机构数"
              :value="countList.companyCounts"
              style="margin-left: 8px"
            />
            <svg-icon :icon-class="'pv'" size="22px" style="margin: 0 0 30px 40px" />
            <el-statistic title="床位数" :value="countList.bedCounts" style="margin-left: 8px" />
            <svg-icon :icon-class="'message'" size="22px" style="margin: 0 0 30px 40px" />
            <el-statistic
              title="老人数"
              :value="countList.elderlyCounts"
              style="margin-left: 8px"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据卡片 -->

    <el-row v-if="userInfo.type === 1" :gutter="10" class="mt-5">
      <el-col :xs="24" :span="12">
        <el-card>
          <template #header>
            <div class="flex-x-between">
              <div>机构分析地图</div>
            </div>
          </template>
          <!-- 地图 -->
          <Map id="Map" width="100%" height="450px" />
        </el-card>
      </el-col>
      <el-col :xs="24" :span="12">
        <el-card>
          <template #header>
            <div class="flex-x-between">
              <div class="flex-y-center">各地区老人柱状图</div>
              <el-link type="primary">
                <span class="text-xs" />
                <el-icon class="text-xs"><ArrowRight /></el-icon>
              </el-link>
            </div>
          </template>

          <el-scrollbar height="400px">
            <div id="DashChart" ref="barChart" style="height: 400px" />
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-else :gutter="10" class="mt-5">
      <el-col :xs="24" :span="12">
        <el-card style="margin-top: 15px">
          <template #header>
            <div class="flex-x-between">
              <div class="flex-y-center">出院、入院、预定 统计</div>
              <el-link type="primary">
                <span class="text-xs" />
                <el-icon class="text-xs"><ArrowRight /></el-icon>
              </el-link>
            </div>
          </template>

          <el-scrollbar height="400px">
            <div id="DashChart_two" ref="barChart_two" style="height: 400px" />
          </el-scrollbar>
        </el-card>
      </el-col>

      <el-col :xs="24" :span="12">
        <el-card style="margin-top: 15px">
          <template #header>
            <div class="flex-x-between">
              <div class="flex-y-center">各年龄段统计</div>
              <el-link type="primary">
                <span class="text-xs" />
                <el-icon class="text-xs"><ArrowRight /></el-icon>
              </el-link>
            </div>
          </template>

          <el-scrollbar height="400px">
            <div id="DashChart_three" ref="barChart_three" style="height: 400px" />
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <NoticeDetail ref="noticeDetailRef" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import { onMounted } from "vue";
import Map from "./components/Map.vue";
import VisitTrend from "./components/VisitTrend.vue";
import { barChartInit } from "./components/DashChart";
import { barChartInit_two } from "./components/DashChart_two";
import { barChartInit_three } from "./components/DashChart_three";
import WebSocketManager from "@/utils/websocket";
import router from "@/router";
import { useUserStore } from "@/store/modules/user";
import StatsAPI, { VisitStatsVO } from "@/api/system/log";
import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
import { accountGetUserInfoAPI, countListAPI } from "@/api/dashborad";
import { getUserInfo } from "@/api/auth/auth";

const FILE_BASE_URL = "http://123.57.237.81:8080/caresystem/";

const noticeDetailRef = ref();
const userStore = useUserStore();
const date: Date = new Date();
const userInfo = ref<any>({});
const countList = ref<any>({});

const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.userInfo.username + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.userInfo.username + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.userInfo.username + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

// 右上角数量
const statisticData = ref([
  {
    // value: 99,
    iconClass: "message",
    title: "消息",
    key: "message",
  },
  {
    // value: 50,
    iconClass: "todo",
    title: "待办",
    suffix: "/100",
    key: "upcoming",
  },
  {
    // value: 10,
    iconClass: "project",
    title: "项目",
    key: "project",
  },
]);

// const onlineUserCount = ref(0);

const visitStatsLoading = ref(true);
const visitStatsList = ref<VisitStats[] | null>(Array(3).fill({}));
interface VisitStats {
  title: string;
  icon: string;
  tagType: "primary" | "success" | "warning";
  growthRate: number;
  // 粒度
  granularity: string;
  // 今日数量
  todayCount: number;
  totalCount: number;
}

/** 格式化增长率 */
const formatGrowthRate = (growthRate: number): string => {
  if (growthRate === 0) {
    return "-";
  }

  const formattedRate = Math.abs(growthRate * 100)
    .toFixed(2)
    .replace(/\.?0+$/, "");
  return formattedRate + "%";
};

/** 获取增长率文本颜色类 */
const getGrowthRateClass = (growthRate: number): string => {
  if (growthRate > 0) {
    return "color-[--el-color-danger]";
  } else if (growthRate < 0) {
    return "color-[--el-color-success]";
  } else {
    return "color-[--el-color-info]";
  }
};

/** 获取访问统计图标 */
const getVisitStatsIcon = (type: string) => {
  switch (type) {
    case "pv":
      return "pv";
    case "uv":
      return "uv";
    case "ip":
      return "ip";
    default:
      return "pv";
  }
};

const notices = ref<NoticePageVO[]>([]);

// 查看更多
function viewMoreNotice() {
  router.push({ path: "/myNotice" });
}

// 阅读通知公告
function viewNoticeDetail(id: string) {
  noticeDetailRef.value.openNotice(id);
}

const barChart = ref();
const barChart_two = ref();
const barChart_three = ref();
onMounted(async () => {
  // 接口

  // 获取用户信息
  await accountGetUserInfoAPI().then((res) => {
    Object.assign(userInfo.value, res);
  });
  await countListAPI().then((res) => {
    countList.value = res;
  });

  if (barChart.value) {
    barChartInit(barChart.value);
  }

  if (barChart_two.value) {
    barChartInit_two(barChart_two.value);
  }

  if (barChart_three.value) {
    barChartInit_three(barChart_three.value);
  }

  // 获取我的通知公告
  // NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 10 }).then((data) => {
  //   notices.value = data.list;
  // });

  // WebSocketManager.subscribeToTopic("/topic/onlineUserCount", (data) => {
  //   console.log("收到在线用户数量：", data);
  //   onlineUserCount.value = JSON.parse(data);
  // });
});
</script>

<style lang="less" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }
  // .title_box {
  // width: 350px;
  // margin-left: -40px;
  // font-size: 50px;
  // }
}
// /deep/.el-statistic__number{

//   font-size: 100px;
// }
</style>
